<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div class="travel-guides-container mx-auto px-4 py-8 max-w-7xl min-h-screen">
    <h2 class="text-3xl font-bold mb-8">精选旅游攻略</h2>
    <div class="grid gap-6">
      <div
          v-for="guide in currentGuides"
          :key="guide.id"
          class="guide-card bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transform transition hover:shadow-lg"
          @click="toGuideView(guide.id)"
      >
        <div class="relative h-[360px] overflow-hidden">
          <img :src="SERVER_ADDR + '/scenicSpot/pic/' + guide.pic" :alt="guide.title" class="w-full h-full object-cover object-top">
        </div>
        <div class="p-6">
          <div class="flex items-center gap-4 mb-4">
            <el-avatar :size="40" :src="SERVER_ADDR + '/scenicSpot/pic/' +guide.user.avatar" />
            <div class="flex-1">
              <div class="flex items-center justify-between">
                <span class="font-medium text-gray-900">{{ guide.user.realname }}</span>
                <span class="text-sm text-gray-500">{{ guide.departureDate }}</span>
              </div>
            </div>
          </div>
          <h3 class="text-xl font-bold mb-2 text-gray-900">{{ guide.title }}</h3>
          <div class="mb-3">
<span class="inline-block px-3 py-1 !rounded-button text-sm text-white" :style="{ backgroundColor: '#4A90E2' }">
{{ guide.destination }}
</span>
          </div>
          <p class="text-gray-600 line-clamp-3">{{ guide.description }}</p>
        </div>
      </div>
    </div>
    <div class="flex justify-center mt-8">
      <el-pagination
          v-model:current-page="currentPage"
          :page-size="pageSize"
          :total="guides.length"
          :pager-count="5"
          layout="prev, pager, next"
          @current-change="handlePageChange"
          background
          class="!rounded-button"
      />
    </div>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue';
import strategyApi from "@/api/strategyApi";
import {useRoute, useRouter} from "vue-router";
const route = useRoute()
const router = useRouter()
//服务器的地址
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR)
const guides = ref([]);
const currentPage = ref(1);
const pageSize = 6;

const currentGuides = computed(() => {
  const start = (currentPage.value - 1) * pageSize;
  const end = start + pageSize;
  return guides.value.slice(start, end);
});

const handlePageChange = (page) => {
  currentPage.value = page;
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
};
// 获取攻略数据
const getGuides = () => {
  strategyApi.selectAll({}, currentPage.value, pageSize).then((res) => {
    guides.value = res.data.list;
  });
}
// 跳转到详细的攻略
// 跳转到攻略详情页
const toGuideView = (id)=>{
  router.push({
    path: '/user/strategy',
    query: {
      id
    }
  });
}
getGuides()
</script>
<style scoped>
.guide-card {
  transition: transform 0.3s ease;
}
.guide-card:hover {
  transform: translateY(-4px);
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>